<template>
  <div>
    <a-modal
      title="科技成果分类"
      :width="1010"
      :visible="visible"
      :confirm-loading="loading"
      ok-text="提交"
      @ok="$emit('ok', queryParam)"
      @cancel="$emit('cancel')"
    >
      <a-spin :spinning="loading">
        <a-form-model
          ref="form"
          :model="queryParam"
          :rules="rules"
        >
          <a-row :gutter="24">
            <a-col :span="6" />
            <a-col :span="12">
              <a-form-model-item
                label="科技成果分类名称"
                :label-col="{ lg: { span: 11 }, sm: { span: 7 } }"
                :wrapper-col="{ lg: { span: 13 }, sm: { span: 17 } }"
                prop="name"
              >
                <BaseInput
                  v-model.trim="queryParam.name"
                  placeholder="请输入等级名称"
                />
              </a-form-model-item>
            </a-col>
            <a-col :span="6" />
          </a-row>
        </a-form-model>
      </a-spin>
    </a-modal>
  </div>
</template>

<script>
  export default {
    name:'a'+ Date.now(),
  props: {
    visible: {
      type: Boolean,
      required: true,
    },
    loading: {
      type: Boolean,
      default: () => false,
    },
    model:Object
  },
  data() {
    return {
      queryParam: {},
      rules: {
        name: [{ required: true, message: '请输入科技成果分类名称', trigger: 'change' }],
      },
    }
  },
  watch: {
    visible(e) {
      if (e) {
        this.$nextTick(() => {
          this.queryParam = this.model
        })
      } else {
        this.queryParam = {}
      }
    },
  },
}
</script>

<style lang='less'  scoped>
</style>
